<template>
  <el-icon
    :size="size"
    :color="color"
    :class="{ 'm-disabled': disabled }"
    @click="clickHandler"
  >
    <svg aria-hidden="true" class="svg-icon" :style="getStyle">
      <use :href="symbolId" :fill="color" />
    </svg>
  </el-icon>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import type { CSSProperties } from 'vue'

defineOptions({
  name: 'MSvgIcon'
})

const emit = defineEmits({
  click: (e) => true
})

const props = withDefaults(
  defineProps<{
    prefix?: string
    name?: string
    color?: string
    size?: number | string
    disabled?: boolean
  }>(),
  {
    prefix: 'icon',
    size: 17,
    disabled: false
  }
)
const symbolId = computed(() => `#${props.prefix}-${props.name}`)

const getStyle = computed<CSSProperties>(() => {
  const { size } = props
  if (typeof size === 'string')
    return {
      width: size,
      height: size
    }

  return {
    width: `${size}px`,
    height: `${size}px`
  }
})

const clickHandler = (e: any) => {
  if (props.disabled) return
  emit('click', e)
}
</script>

<style lang="scss" scoped>
.svg-icon {
  display: inline-block;
  overflow: hidden;
  fill: currentcolor;
  vertical-align: -0.15em;
}

.m-disabled {
  cursor: not-allowed !important;
  --color: #c8c9cc !important;
}
</style>
